<template>
  <div class='questions-choice-container'>
    <el-card>
      <!-- 新增试题 -->
      <div class="header">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" @click="$router.push('/questions/new')" ><i class="el-icon-edit"></i> 新增试题</el-button>
      </div>
      <!-- 搜索 -->
      <el-row :gutter="0">
      <el-form ref="formRef" :model="form" :rules="rules" size="medium" label-width="100px">
        <el-col :span="6">
          <el-form-item label="学科" prop="discipline">
            <el-select v-model="form.discipline" placeholder="请选择" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in disciplineOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" prop="directory">
            <el-select v-model="form.directory" placeholder="请选择" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in directoryOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" prop="label">
            <el-select v-model="form.label" placeholder="请选择" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in labelOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键词" prop="keywords">
            <el-input v-model="form.keywords" placeholder="根据题干搜索" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" prop="difficulty">
            <el-select v-model="form.difficulty" placeholder="请选择" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in difficultyOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" prop="direction">
            <el-select v-model="form.direction" placeholder="请选择" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in directionOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" prop="Entryperson">
            <el-select v-model="form.Entryperson" placeholder="请选择" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in EntrypersonOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注" prop="remarks">
            <el-input v-model="form.remarks" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" prop="abbreviation">
            <el-input v-model="form.abbreviation" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="城市" prop="city">
            <el-select v-model="form.city" placeholder="城市" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in cityOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="50px" label="" prop="field112">
            <el-select v-model="form.field112" placeholder="请选择" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field112Options" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        discipline: undefined,
        directory: undefined,
        label: undefined,
        keywords: undefined,
        type: undefined,
        difficulty: undefined,
        direction: undefined,
        Entryperson: undefined,
        remarks: undefined,
        abbreviation: undefined,
        city: undefined,
        field112: undefined
      },
      rules: {
        discipline: [],
        directory: [],
        label: [],
        keywords: [],
        type: [],
        difficulty: [],
        direction: [],
        Entryperson: [],
        remarks: [],
        abbreviation: [],
        city: [],
        field112: []
      },
      disciplineOptions: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }],
      directoryOptions: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }],
      labelOptions: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }],
      typeOptions: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }],
      difficultyOptions: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }],
      directionOptions: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }],
      EntrypersonOptions: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }],
      cityOptions: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }],
      field112Options: [{
        label: '选项一',
        value: 1
      }, {
        label: '选项二',
        value: 2
      }]
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    submitForm () {
      this.$refs.formRef.validate(valid => {
        if (!valid) { }
        // TODO 提交表单
      })
    },
    resetForm () {
      this.$refs.formRef.resetFields()
    }
  }
}
</script>

<style scoped lang='less'>
.questions-choice-container{
  padding: 10px;
  .header{
    display: flex;
    justify-content: space-between;
    span{
      color: #ffc0cb;
      font-size:12px ;
    }
    .el-icon-edit{
      margin-right: 5px;
    }
  }
}
</style>
